<template>
  <view class="search_center u-p-18">
    <!-- 搜索框 -->
    <view class="searchBox u-p-b-30">
      <u-search
        placeholder="输入商品名"
        v-model="keyword"
        :action-style="actionStyle"
        @search="search"
        @custom="search"
        @change="change"
        focus="true"
      ></u-search>
    </view>
    <!-- 搜索历史 -->
    <view v-if="historyShow" class="searchHistory">
      <view class="history u-font-35">
        <text >历史搜索</text>
        <!-- 垃圾桶 -->
        <u-icon name="trash" color="#909399" @tap="delHistory"></u-icon>
      </view>
      <view class="searchBox">
        <!-- 历史搜索胶囊 -->
        <text
          class="searchItem"
          v-for="(item,index) in searchList"
          :key="index"
          @tap="clickKey(index)"
        >
          {{ item }}
        </text>
      </view>
    </view>
    <view v-else class="searchBox">
      <YgCell
        v-for="item in goodsList"
        :key="item.goods_id"
        :goodsObj="item"
      ></YgCell>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "", //关键字
      actionStyle: {
        //搜索按钮的样式
        background: `#EA4350`,
        "border-radius": "8rpx",
        width: "101rpx",
        height: "61rpx",
        display: "flex",
        "justify-content": "center",
        "align-items": "center",
        color: "#fff",
        "font-size": "25rpx",
      },
      searchList: uni.getStorageSync("searchList") || [],
      historyShow: true,
      goodsList: [],
     
    };
  },
  methods: {
    
    // 搜索事件
    search() {
      this.historyShow = false;

      if (!this.keyword) {
        return;
      }
      this.getGoodsSearch();
      this.keyword = this.keyword.trim();
      const index = this.searchList.findIndex((item) => item === this.keyword);
      if (index !== -1) {
        //  找到 先删除再添加
        this.searchList.splice(index, 1);
      }

      if (this.searchList.length === 10) {
        // 刪除最後一個
        this.searchList.pop();
      }
      this.searchList.unshift(this.keyword);
      uni.setStorageSync("searchList", this.searchList);
    },
    // 点击搜索历史事件
    clickKey(index){
      this.keyword = this.searchList[index];
      this.search();
    },
    // 删除搜索历史记录
    delHistory() {
      this.searchList = [];
      uni.setStorageSync("searchList", this.searchList);
    },
    // 输入框内容发生变化时触发
    change() {
      if (this.keyword === "") {
        this.historyShow = true;
      }
    },
    // 商品搜索接口方法
    async getGoodsSearch() {
      const res = await this.$u.api.getGoodsSearch({ query: this.keyword });
      console.log(res);
      this.goodsList = res.message.goods;
    },
  },
};
</script>

<style lang="scss">
.search_center.u-p-18 {
  .searchBox.u-p-b-30 {
    u-search {
    }
  }

  .searchHistory {
    .history.u-font-35 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-weight: 700;
    }

    .searchBox {
      padding: 20rpx 0;
      text.searchItem {
        display: inline-block;
        background-color: #f2f2f2;
        padding: 15rpx 20rpx;
        border-radius: 999rpx;
        margin: 10rpx;
      }
    }
  }
}
</style>